<template>
  <div class="resume_header">
    <span>所有岗位</span>
  </div>
  <div class="resume_center">

    <el-table :data="filterTableData.slice((page - 1) * limit, page * limit)
    " style="width: 100%" height="520px" size="large"  @filter-change="tablesort">
      
      <el-table-column class="table_colum" label="岗位名称" size="large" prop="jobName" sortable column-key="jobIndustry"
        :filters="filterJobNameData" >
        <template #default="scope">
          <el-popover effect="light" trigger="hover" placement="top" width="350px">
            <template #default>
              <div>岗位名称: {{ scope.row.jobName }}</div>
              <div>学历要求: {{ scope.row.jobEdu }}</div>
              <div>年龄要求: {{ scope.row.jobAge }}</div>
              <div>工作经验: {{ scope.row.jobEx }}</div>
              <div>工作薪资: {{ scope.row.jobSalary }}</div>
              <div>所属行业: {{ scope.row.jobIndustry }}</div>
            </template>
            <template #reference>
              <span class="jobName_tag">{{ scope.row.jobName }}</span>
            </template>
          </el-popover>
        </template>

      </el-table-column>
      <el-table-column label="发布公司" prop="eName" sortable column-key="eName"  :filters="filterENameData"/>
      <el-table-column label="工作地址" prop="jobAddress" />
      
      <el-table-column label="联系电话" prop="contactPhone" />
      <el-table-column label="状态" prop="jobState" width="100px" sortable column-key="jobState"
        :filters="filterJobStateData">
        <template #default="scope">
          
          <el-tag :type="ElTagState(scope.row.jobState)">
            {{ scope.row.jobState }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column align="right">
        <template #header>
          <el-input v-model="search" size="default" placeholder="搜索" width="300px" />
        </template>
        <template #default="scope">
          <el-popconfirm width="220" confirm-button-text="是" cancel-button-text="否" icon-color="#626AEF" title="是否确认操作?"
            cancel-button-type="info" @confirm="handleDelete(scope.$index, scope.row)">
            <template #reference>
              <el-button size="default" type="danger"
                v-show="scope.row.isPublishing == 'true' ? true : false">撤销</el-button>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination :page="page" :limit="limit" :handleSizeChange="handleSizeChange"
        :handleCurrentChange="handleCurrentChange" :filterTableData="filterTableData" :pagesizes="pagesizes" />
    </div>


  </div>
</template>
<script lang='ts' setup>


import { ElDrawer, ElMessageBox } from 'element-plus'

import { computed, ref, onMounted, reactive, onBeforeMount } from 'vue'
import { adminGetAllJobs, adminRevokeJob } from "@/api/adminApi"
import { useStore } from "vuex"
import { useRouter } from "vue-router"
import Pagination from "@/components/Pagination.vue"
import { data, elmessage,ElTagState } from '@/hook/hook'
const store = useStore()
const router = useRouter()
// 表格数据定义
interface Jobs {
  jobId: string
  jobName: string
  jobAddress: string,
  jobEdu: string,
  jobAge: string,
  jobEx: string,
  jobSalary: string,
  jobState: string,
  jobIndustry: string,
  isPublishing: string,
  eName: string,
  eId: string,
  contactPhone: string

}
const tableData: Jobs[] = reactive([])

const search = ref('')
const filterTableData = computed(() =>

  tableData.filter(
    (data, index) =>
      !search.value ||
      // 通过岗位名称筛选
      data.jobName.toLowerCase().includes(search.value.toLowerCase()) ||
      data.eName.toLowerCase().includes(search.value.toLowerCase())
    // data.jobName.toLowerCase().indexOf(search.value.toLowerCase()) !== -1 
  ))

// 筛选
const filterJobNameData: filterType[] = reactive([])
const filterENameData: filterType[] = reactive([])
const filterJobStateData: filterType[] = reactive([])

// 定义筛选类型
interface filterType {
  text: string,
  value: string
}

var jobIndustryArr: any = reactive([])
var eNameArr: any = reactive([])
var jobStateArr: any = reactive([])
const tableData_1: Jobs[] = reactive([])
const setJobIndustryArr = (arr: any) => {
  jobIndustryArr = arr
}
const getJobIndustry = () => {
  return jobIndustryArr
}

const setENameArr = (arr: any) => {
  eNameArr = arr
}
const getENameArr = () => {
  return eNameArr
}
const setJobStateArr = (arr: any) => {
  jobStateArr = arr
}
const getJobStateArr = () => {
  return jobStateArr
}

const tablesort = (filterArr: Jobs) => {
  // 清除原表格数据
  tableData.splice(0, tableData.length)
  if ((typeof (filterArr.jobIndustry)) == "object") {
    setJobIndustryArr(filterArr.jobIndustry)
  }
  if ((typeof (filterArr.eName)) == "object") {
    setENameArr(filterArr.eName)
  }
  if ((typeof (filterArr.jobState)) == "object") {
    setJobStateArr(filterArr.jobState)
  }
  const jobIndustryLength = getJobIndustry().length
  const eNameLength = getENameArr().length
  const jobStateLength = getJobStateArr().length
  // 按筛选条件重新加入数据
  tableData_1.forEach((valu: any, index: any, arr_1: any) => {
    // 所有筛选重置，即最初排序
    if (jobIndustryLength == 0 && eNameLength == 0 && jobStateLength == 0) {
      if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
        tableData.push(valu)
      }

    }
    // 只筛选岗位名称
    else if (jobIndustryLength > 0 && eNameLength == 0 && jobStateLength == 0) {
      if (getJobIndustry().includes(valu["jobIndustry"])) {
        if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 只筛选公司名称
    else if (jobIndustryLength == 0 && eNameLength > 0 && jobStateLength == 0) {
      if (getENameArr().includes(valu["eName"])) {
        if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 只筛选状态
    else if (jobIndustryLength == 0 && eNameLength == 0 && jobStateLength > 0) {
      if (getJobStateArr().includes(valu["jobState"])) {
        if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 筛选岗位名称、公司名称
    else if (jobIndustryLength > 0 && eNameLength > 0 && jobStateLength == 0) {
      if (getJobIndustry().includes(valu["jobIndustry"]) && getENameArr().includes(valu["eName"])) {
        if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
          tableData.push(valu)
        }

      }
    }
    // 筛选岗位名称、状态
    else if (jobIndustryLength > 0 && eNameLength == 0 && jobStateLength > 0) {
      if (getJobIndustry().includes(valu["jobIndustry"]) && getJobStateArr().includes(valu["jobState"])) {
        if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 筛选公司名称、状态
    else if (jobIndustryLength == 0 && eNameLength > 0 && jobStateLength > 0) {
      if (getENameArr().includes(valu["eName"]) && getJobStateArr().includes(valu["jobState"])) {
        if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
    // 筛选岗位名称、公司名称、状态
    else if (jobIndustryLength > 0 && eNameLength > 0 && jobStateLength > 0) {
      if (getJobIndustry().includes(valu["jobIndustry"]) && getENameArr().includes(valu["eName"]) && getJobStateArr().includes(valu["jobState"])) {
        if (tableData.findIndex((item: { jobId: string; }) => item.jobId == valu["jobId"]) == -1) {
          tableData.push(valu)
        }
      }
    }
  })
}



// 撤销在招职位
const handleDelete = (index: number, row: Jobs) => {
  const newData = {
    ...data(),
    jobId: row.jobId,
  }
  adminRevokeJob(newData).then((res: any) => {
    if (res.data["code"] == "200") {
      elmessage(res.data["message"], res.data["type"])
      row.jobState = "已被撤销"
      row.isPublishing = "false"
      // tableData.splice(index, 1)
    } else if (res.data["code"] == "300") {
      elmessage(res.data["message"], res.data["type"])
      setTimeout(() => {
        router.replace("/login")
      }, 500);
      localStorage.clear()
    } else {
      console.log(res.data["message"]);
    }
  })

}

// 分页器
const page = ref(1)
const pagesizes = ref([1, 2, 3, 4, 10, 20, 30, 40])
const limit = ref(10)

const handleSizeChange = (val: number) => {
  limit.value = val
  page.value = 1
}
const handleCurrentChange = (val: number) => {
  page.value = val
}


// 初始化和过滤表格内容
const pushTableData = () => {


  const job = store.state.jobState.jobs

  if (tableData.length != 0) {

    tableData.forEach((value, index, self) => {
      for (let i = 0; i < job.length; i++) {
        // 给tableData添加新数据
        if (self.findIndex(item => item.jobId == job[i].jobId) == -1) {
          tableData.push(job[i])

        }
      }
    })


  } else {
    for (let i = 0; i < job.length; i++) {
      tableData.push(job[i])
    }
  }
}



const init = () => {
  adminGetAllJobs(data()).then((res: any) => {
    if (res.data["code"] == "200") {
      res.data.datas.forEach((value: any, index: any, self: any) => {
        tableData.push(value)
        tableData_1.push(value)
      })
      res.data["industrys"].forEach((value: any, index: any, self: any) => {
        filterJobNameData.push(value)
      });
      res.data["es"].forEach((value: any, index: any, self: any) => {
        filterENameData.push(value)
      });
      res.data["jobStates"].forEach((value: any, index: any, self: any) => {
        filterJobStateData.push(value)
      });
    } else if (res.data["code"] == "300") {
      elmessage(res.data["message"], res.data["type"])
      setTimeout(() => {
        router.replace("/login")
      }, 500);
      localStorage.clear()
    } else {
      console.log(res.data["message"]);

    }
  })
}


onBeforeMount(() => {
  // pushTableData()
  init()


})


</script>
<style scoped>
.pagination {
  float: right;
  margin-right: 50px;
  /* right: 150px; */
}

.jobName_tag {
  /* background-color: #FFF; */
  color: #000;
  /* border-width: 0; */
  /* line-height: 80%; */
  font-size: 14px;
}

/* .table_colum:hover .jobName_tag:hover {
  background-color: #F5F7FA
} */

.addJob_btn {
  margin-right: 100px;
}

.resume_center {
  font-family: '微软雅黑';
  height: 800px;
  background-color: #FFF;
}

.resume_header {
  background-color: rgb(215, 215, 215);
  height: 50px;
  display: flex;
  align-items: center;
  padding-left: 20px;
  justify-content: space-between;
}

a {
  text-decoration: none;
  color: #000;
}
</style>